<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>阿洛主页</title>
    <link rel="stylesheet" href="stylesheets/arno-conmon.css">
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendor/fullpage.js/dist/jquery.fullpage.min.css">
</head>
<body>
<nav class="navClass  navbar-fixed-top navbar-default"  role="navigation" style="border: none">
    <div class="container">
        <div class="row " style="border: none;padding: 0">
            <div class="col-md-4 col-sm-5 col-xs-9 " style="padding: 0">
                <i class="fa fa-free-code-camp fa-3x fl" aria-hidden="true" style="line-height: 50px"></i>
                <p class="fl" style="font-size: 22px;line-height: 50px;margin: 0 0 0 10px">Final Arno</p>
            </div>
            <ul id="menu" class="nav-menu hidden-xs col-md-8 col-sm-7 col-xs-6" style="padding: 0" >
                <li data-menuanchor="page1"><a class="active" href="#page1">Home</a></li>
                <li data-menuanchor="page2" ><a href="#page2">My Skills</a></li>
                <li data-menuanchor="page3"><a  href="#page3">About me</a></li>
                <li data-menuanchor="page4" ><a href="#page4">Contact</a></li>
            </ul>
            <button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#bs1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="row" >
            <div class="visible-xs" id="bg-xs">
                <div class="collapse navbar-collapse" id="bs1" style="border: none">
                    <ul class="nav navbar-nav">
                        <li data-menuanchor="page1"><a  href="#page1">Home</a></li>
                        <li data-menuanchor="page2"><a href="#page2">My Skills</a></li>
                        <li data-menuanchor="page3" ><a href="#page3">About me</a></li>
                        <li data-menuanchor="page4"><a href="#page4">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="container-fluid " style="padding: 0">
   <div  id="dowebok" style="padding: 0">
       <div class="section page1">
            <div class="row">
                <div class="col-md-12">
                    <div class="about-me">
                        <p>涂路平 成都</p>
                        <p>WEB前端工程师</p>
                    </div>
                    <div class="active-box"></div>
                </div>
            </div>
       </div>
       <div class="section page2">
           <div class="row" style="height: 100%;width: 100%;padding: 0;margin: 0">
               <div class="col-md-12 col-sm-12 col-xs-12" style="padding: 0;height: 100%;overflow: hidden;
               position: relative">
                   <div class="buttons">
                       <div class="rg"></div>
                       <div class="lf bk"></div>
                   </div>
                   <ul class="box">
                       <li class="skills" style="background:url(images/skills1.jpg);">
                           <div class="detaile">
                               <h1>experienced</h1>
                               <p>75%</p>
                               <div class="HTMLskill"></div>
                           </div>
                           <div class="box-tip"><h1>HTML+CSS</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills2.jpg);">
                           <div class="detaile">
                               <h1>skillful</h1>
                               <p>65%</p>
                               <div class="JavescriptSkill"></div>
                           </div>
                           <div class="box-tip"><h1>Javescript</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills3.jpg)">
                           <div class="detaile">
                               <h1>skillful</h1>
                               <p>70%</p>
                               <div class="JQuerySkill"></div>
                           </div>
                           <div class="box-tip"><h1>JQuery</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills4.jpg)">
                           <div class="detaile">
                               <h1>skillful</h1>
                               <p>75%</p>
                               <div class="BootstrapSkill"></div>
                           </div>
                           <div class="box-tip"><h1>Bootstrap</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills5.jpg)">
                           <div class="detaile">
                               <h1>grasp</h1>
                               <p>65%</p>
                               <div class="AngularSkill"></div>
                           </div>
                           <div class="box-tip"><h1>Angular</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills6.jpg)">
                           <div class="detaile">
                               <h1>skillful</h1>
                               <p>68%</p>
                               <div class="AjaxSkill"></div>
                           </div>
                           <div class="box-tip"><h1>Ajax</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills7.jpg)">
                           <div class="detaile">
                               <h1>grasp</h1>
                               <p>65%</p>
                               <div class="Node-js-skill"></div>
                           </div>
                           <div class="box-tip"><h1>Node js</h1></div>
                       </li>
                       <li class="skills" style="background:url(images/skills8.jpg)">
                           <div class="detaile">
                               <h1>grasp</h1>
                               <p>65%</p>
                               <div class="Echarts-skill"></div>
                           </div>
                           <div class="box-tip"><h1>Echarts</h1></div>
                       </li>
                   </ul>
               </div>
           </div>
       </div>
       <div class="section page3" style="background-color: #FFFFFF">
           <h1 style="line-height: 120px">I am a painter</h1>
           <canvas height="300px" width="600px"  style="width: 600px;height: 300px;" id="myCanvas"></canvas>
       </div>
       <div class="section page4" style="background: url(images/page4-bg.jpg);background-repeat: no-repeat;background-size: cover">
           <div class="container" >
               <div class="row" style="text-align: center">
                   <div class="col-md-12 col-sm-12 col-xs-12">
                       <h1 style="color: #d6ffff;line-height: 80px;font-size: 32px;font-weight: 900">CONTACT ME</h1>
                   </div>

               </div>
               <div class="row" >
                   <div class="col-md-4 col-sm-4 col-xs-12">
                       <div class="p4-address">
                           <span class="glyphicon glyphicon-map-marker"></span>
                           <p>Cheng Du</p>
                       </div>
                   </div>
                   <div class="col-md-4 col-sm-4 col-xs-12">
                       <div class="p4-email">
                           <span class="glyphicon glyphicon-envelope"></span>
                           <p>863780387@qq.com</p>
                       </div>
                   </div>
                   <div class="col-md-4 col-sm-4 col-xs-12">
                       <div class="p4-phone">
                           <span class="glyphicon glyphicon-earphone"></span>
                           <p>18328504693</p>
                       </div>
                   </div>
               </div>
               <div class="row" style="height: 100%">
                   <div class="mes">
                       <form action="/sendMail" method="post" class="ng-pristine ng-valid">
                           <p>
                               <input name="visitorName" type="text" required="" placeholder="your name">
                               <input name="visitorEmail" type="email" required="" placeholder="your email">
                           </p>
                           <textarea name="visitorTest" required="" placeholder="Leave your words"></textarea>
                           <button type="submit">Send Message</button>

                       </form>
                   </div>
               </div>
           </div>
       </div>
   </div>
</div>
<img src="images/lvzi.png" alt="" style="display: none"  id="imgcanvas">
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/fullpage.js/dist/jquery.fullpage.min.js"></script>
<script src="javascript/arno-script.js"></script>
<script>
    $(function(){
        $('#dowebok').fullpage({
            sectionsColor: ['#ffffff', '#ffffff', '#FFFFFF', '#f90'],
            anchors: ['page1', 'page2', 'page3', 'page4'],
            menu: '#menu'
        });

    });

</script>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var img=document.getElementById("imgcanvas");
    var sss=1;

    setInterval(function () {
        cxt.clearRect(0,0,260,294);
                    console.log(sss);
            cxt.drawImage(img, sss*260, 0, 260, 294, 0, 0, 260, 294);
        sss++;
        if(sss==66){
            sss=0;
        }
    },60);

</script>
</body>
</html>